<script setup lang="ts">
import {DynamicCondition} from "./components/index";
import {FormSchema} from "./components/DynamicCondition/src/types/schemas.ts";
import {GroupNode} from "./components/DynamicCondition/src/types/node.ts";
import {ref} from "vue";


const schemas: FormSchema[] = [{
  label: "配置名称",
  defaultValue: "测试",
  conditionTypes: ['eq', 'like'],
  field: "name"
}, {
  label: "接入类型",
  defaultValue: "MicroId_IOT111111",
  conditionTypes: ["not_in", "in", 'eq'],
  component: 'Select',
  componentProps: {
    placeholder: '请输入',
    options: [{
      label: '微标Iot平台',
      value: 'MicroId_IOT'
    }, {
      label: '阿里云Iot平台',
      value: 'Aliyun_Iot'
    }]
  },
  field: "type"
}];

function reset() {
  console.log('reset')
}

async function search(ast: GroupNode[]) {
  console.log('search', ast)
  const res = await getDataSource({
    pageSize: 10,
    page: 1,
    ast
  })

  console.log("搜索结果：", res)
}

function save() {
  console.log('save')
}

// function searchConditionSelect(val) {
//   console.log('searchConditionSelect', val)
// }
//
// function searchConditionSelectDel(val) {
//   console.log('searchConditionSelectDel', val)
// }


type SearchModel = {
  pageSize: number;
  page: number;
  ast: GroupNode[]
}

async function getDataSource(searchModel: SearchModel) {
  return fetch("http://localhost:8080/api/page", {
    method: "POST",
    body: JSON.stringify(searchModel) as any,
    headers: {
      "Content-Type": 'application/json'
    }
  })
}

// async function getDataSource2(searchModel: SearchModel) {
//   return fetch("http://localhost:8099/api/iot/test/page", {
//     method: "POST",
//     body: JSON.stringify(searchModel) as any,
//     headers: {
//       "Content-Type": 'application/json'
//     }
//   })
// }

const value = ref<GroupNode[]>()

</script>

<template>
  <div style="background: #eeeeee;height: 100vh">
    <dynamic-condition
        v-model:value="value"
        @reset="reset"
        @search="search"
        @save="save"
        size="small"
        :fromSchemas="schemas">
    </dynamic-condition>

    {{value}}
  </div>
</template>

<style scoped>

</style>
